<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' title="添加广告账户" :visible.sync="dialogVisible" @close="resetForm()" width="600px">
        <el-input placeholder="请输入广告账户ID、广告账户名称进行搜索" clearable prefix-icon="el-icon-search" v-model="keyword">
        </el-input>
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="filteredData(tableData,keyword)" class="com_table" height="400px" :row-key="(row)=>{ return row.advertiser_id}" style="margin-top:20px" ref="userRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="35" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="advertiser_id" label="账户ID" width="180">
                </el-table-column>
                <el-table-column prop="name" label="账户名称">
                </el-table-column>
                <el-table-column prop="type" label="账户类型" width="150">
                    <template slot-scope="scope">
                        <el-checkbox-group v-model="scope.row.type" size="mini" class="user_type" @change="changeType(val,scope.row)">
                            <el-checkbox :label="1" border>直播托管</el-checkbox>
                            <el-checkbox :label="2" border>短视频托管</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            keyword:"",
            loading: false,
            dialogVisible: false,
            type: null,
            hasCheck: [],
            userData: [],
            tableData: [],
        };
    },
    created() {
        
    },
    beforeDestroy() {},
    methods: {
        //获取广告组
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/autodrop/configure/advertiserList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                res.data.forEach(item => {
                    item.type = [1,2]
                });
                res.data.forEach(item => {
                    this.userData.forEach((row) => {
                        if(item.advertiser_id==row.advertiser_id){
                            item.type = row.type
                        }
                    })
                });
                this.tableData = res.data;
                this.userData.forEach((row) => {
                    this.$refs.userRef.toggleRowSelection(row, true)
                })
            }
        },

        // 添加
        submitForm() {
            if (this.hasCheck.length > 0) {
                this.$emit("getUserData", this.hasCheck);
                this.resetForm();
            } else {
                this.$message.error("请选择广告账户！");
                return;
            }
        },

        // 筛选
        filteredData(list, query) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (
                    item.name.indexOf(query) !== -1 ||
                    item.advertiser_id == query
                ) {
                    return item;
                }
            });
            return list;
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.tableData = []
            this.keyword = "";
            this.$refs.userRef.clearSelection();
        },

        // 表格选中
        handleSelectionChange(v) {
            this.hasCheck = v;
        },

        changeType(val,row){
            this.hasCheck.forEach((item)=>{
                if(item.advertiser_id==row.advertiser_id){
                    item.type = row.type
                }
            })
        }
    },
    components: {},
};
</script>


<style scoped>
/deep/ .user_type .el-checkbox{
    width: 100px;
    height: 25px;
}
/deep/ .user_type .el-checkbox.is-bordered+.el-checkbox.is-bordered{
    margin-left: 0;
}
/deep/ .user_type .el-checkbox .el-checkbox__label{
    color: #616C85;
}
/deep/ .user_type .el-checkbox.is-bordered.is-checked .el-checkbox__label{
    color: #4475ff;
}

</style>
